<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/loading.css" />
		<link rel="stylesheet" href="../css/organize-groups.css" />
		<style>
			[v-cloak] {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<div id="Loading">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="refreshContainer">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="width: 45px;"></a>
				<h1 class="mui-title">群聊</h1>
				<a class="mui-icon mui-icon mui-icon-plusempty mui-pull-right" style="font-weight: bold;" id='btnAddGroups'></a>
			</header>
			<div class="mui-content" id="groupschatList" v-cloak>
				<div class="list-single" v-if="items.length > 0">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" v-for="item in items" :data-groupid="item.id" :data-groupname="item.name">
							<div class="mui-slider-right mui-disabled">
								<a class="mui-btn mui-btn-red">删除</a>
							</div>
							<div class="mui-slider-handle" @click="openGroupchat(item)">
								<div class="mui-col-xs-12 mui-pull-left">
									<img class="mui-media-object mui-pull-left" style="display: block; line-height: 42px;max-width: 42px;height: 42px;" src="../images/group.png">
									<div class="mui-media-body" style="font-size: 16px; line-height: 42px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
										{{item.name}}
									</div>
								</div>
							</div>
						</li>

						<!--<li class="mui-table-view-cell">
							<a href="#">
								<div class="mui-col-xs-9">
									<img class="mui-media-object mui-pull-left" style="border-radius: 5px;" src="../images/qktj.jpeg">
									<div style="line-height: 42px;">
										城市管理工作群
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">
								<div class="mui-col-xs-9">
									<img class="mui-media-object mui-pull-left" style="border-radius: 5px;" src="../images/qktj.jpeg">
									<div style="line-height: 42px;">
										机关领导群
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">
								<div class="mui-col-xs-9">
									<img class="mui-media-object mui-pull-left" style="border-radius: 5px;" src="../images/qktj.jpeg">
									<div style="line-height: 42px;">
										食药监督查群
									</div>
								</div>
							</a>
						</li>-->
					</ul>
					<div class="title" v-show="items.length != 0" style="text-align: center;">
						{{items.length}}个群聊
					</div>
				</div>
				<div class="list-single" v-else>
					<div class="title" style="text-align: center;">
						暂无群聊信息
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
	var groupschatvm;

	mui.init({
		pullRefresh: {
			container: '#refreshContainer',
			down: {
				style: 'circle',
				height: 50, //可选,默认50.触发下拉刷新拖动距离,
				contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
				contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
				contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容

				style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色

				range: '100px', //可选 默认100px,控件可下拉拖拽的范围
				offset: '0px', //可选 默认0px,下拉刷新控件的起始位置				
				callback: pulldownRefresh
			}
		}
	})

	mui.plusReady(function() {

		initDom();

		initChatData();

		//	新建群聊
		mui('body').on('tap', '#btnAddGroups', function() {
			mui.openWindow({
				url: '/html/organize-groups-add.html',
				id: 'organize-groups-add',
				createNew: false,
				/*extras: {
					'chattype': '1', //chattype类型：0 单聊 ; 1 群聊
				},*/
				show: {
					autoShow: true,
					aniShow: 'slide-in-right',
					duration: 300
				},
				waiting: {
					autoShow: false,
					title: '正在加载...'
				}
			})
		})

		//	监听更新群聊列表
		window.addEventListener('refreshChat', function(e) {
			initChatData();
		});

		//	打开群聊列表
		window.addEventListener('openImChat', function(e) {

			setTimeout(function() {
				mui.openWindow({
					url: '/html/im-chat.html',
					id: 'im-chat',
					createNew: false,
					extras: {
						'chattype': '1', //chattype类型：0 单聊 ; 1 群聊
						"userid": e.detail.groupid, //自定义扩展参数，可以用来处理页面间传值
						"notestype": e.detail.groupname
					},
					show: {
						autoShow: true,
						aniShow: 'slide-in-right',
						duration: 300
					},
					waiting: {
						autoShow: false,
						title: '正在加载...'
					}
				}, 500);
			})

		});

	});

	function initChatData() {
		ctdj.group.getGroup(function(r) {
			if(r.success) {
				groupschatvm.items = r.result;
			}

			if($("#Loading").length > 0) {
				setTimeout(function() {
					document.body.removeChild(document.getElementById('Loading'));
				}, 200)
			}
		});
	}

	//	退出群聊 
	$(document).on('slideleft', '#groupschatList .mui-table-view-cell', function(event) {
		var groupname = this.getAttribute('data-groupname');
		var groupsid = this.getAttribute('data-groupid');
		console.log(groupsid);
		var elem = this;
		var btnArray = ['取消', '确认'];
		mui.confirm('确认退出群聊' + groupname, '温馨提示', btnArray, function(e) {
			if(e.index == 1) {

				mui.swipeoutClose(elem); // 还原删除按钮状态
				ctdj.group.exitGroup(groupsid, function(r) {
					if(r.success) {

						var delChatPage = plus.webview.getWebviewById('/html/sub-message.html');
						if(delChatPage) {
							mui.fire(delChatPage, 'delExitRectentMsg', groupsid);
						}

						initChatData();
					}
				});

			} else {
				setTimeout(function() {
					mui.swipeoutClose(elem);
				}, 0);
			}
		});
	});

	//	初始化DOM
	function initDom() {
		groupschatvm = new Vue({
			el: '#groupschatList',
			data: {
				items: []
			},
			methods: {
				openGroupchat: function(item) { //群聊列表
					mui.openWindow({
						url: '/html/im-chat.html',
						id: 'im-chat',
						createNew: false,
						extras: {
							'chattype': '1', //chattype类型：0 单聊 ; 1 群聊
							"userid": item.id, //自定义扩展参数，可以用来处理页面间传值
							"notestype": item.name
						},
						show: {
							autoShow: true,
							aniShow: 'slide-in-right',
							duration: 300
						},
						waiting: {
							autoShow: false,
							title: '正在加载...'
						}
					});
				}
			}
		})
	};

	//	下拉刷新操作
	function pulldownRefresh() {
		initChatData();
		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
	}
</script>